<template>
  <div class="expect" ref="expectCharts"></div>
</template>

<script>
import * as echarts from "echarts";
import { getExpectData } from "api/interface";
export default {
  name: "Expect",
  mounted() {
    this.$nextTick(function () {
      /* 绘制图表 */

      //期望课程
      let expectCharts = echarts.init(this.$refs.expectCharts);
      //期望模块饼图选项
      let expectChartsOption = {
        tooltip: {
          show: true,
          trigger: "item", //散点图和饼图的可以使用item触发
        },
        legend: {
          //表示数据的提示
          left: "80%", //靠左排列的位置
          top: "bottom", //靠顶部排列的位置
          orient: "vertical", //排列方向 horizontal
          itemWidth: 10, //提示框的宽度
          itemHeight: 10, //提示框的高度
          textStyle: {
            //设置字体样式
            // color:"#fff"//颜色
          },
        },
        color: ["#D75A3A", "#CE1908", "#55A49F"], //设置环形图颜色
        series: [], //系列
      };
      expectCharts.setOption(expectChartsOption);
      this.$emit("resize", expectCharts);
      //底部环形图异步请求
      getExpectData().then((res) => {
        let data = res.data?.data || [];
        let sData = data.map((item) => {
          return {
            value: item.rate,
            name: item.title,
          };
        });
        expectCharts.setOption({
          series: {
            name: data.desc,
            type: "pie",
            radius: ["10%", "70%"], //半径
            avoidLabelOverlap: true, //重要属性 防止标签重叠
            label: {
              //文字数据提示
              show: true,
              position: "outer", //可以是inner center outer设置提示位置
              formatter: "{b}:{d}%", //\n\n很关键 能够让文字显示在牵引线上方
              // padding: [0, -50]//文字的padding位置
            },
            emphasis: {
              //强调(当鼠标移入的时候显示的强调内容)
              label: {
                show: true,
                fontSize: "10",
                fontWeight: "bold",
              },
            },
            labelLine: {
              //牵引线
              show: true,
              length: 10, //牵引线长度
              length2: 10,
              lineStyle: {
                //牵引线颜色
                color: "#808080",
              },
            },
            data: sData,
          },
        });
      });
    });
  },
};
</script>

<style scoped>
.expect {
  height: 100%;
  width: 100%;
}
</style>